	<template>
		<view class="bg">

		<!-- wrap: “包裹、环绕”  -->
		<view class="wrap">
			<!-- flex的包围容器 -->
			<view class="container">
				<!-- 顶部安全区域占位 -->
				<!-- <view class="navbar" :style="{ paddingTop: safeAreaInsets.top-30 + 'px' }"></view> -->
				
				<!-- 头部 -->
				<view class="header">	
					<!-- logo-->
					<view class="logo">
						<image src="@/static/logo_hiack.png"></image>
					</view>
				</view>
				<!-- 中间2 -->
				<view class="info">
					
					<view @tap="run" class="info_item">
						<view class="icon">
							<image src="@/static/coding.png"></image>
						</view>
						<view class="text">
								测试界面
						</view>
					</view>
					
					<view @tap="diaoyong"  class="info_item">
						<view class="icon">
							<image src="@/static/coding.png"></image>
						</view>
						<view class="text">
								获取 openid\计算器
						</view>
					</view>
					
					<view @tap="run2" class="info_item">
						<view class="icon">
							<image src="@/static/coding.png"></image>
						</view>
						<view class="text">
							
							
								Issue
								
								
						</view>
					</view>
					
					<view  class="info_item">
						<view class="icon">
							<image src="@/static/coding.png"></image>
						</view>
						<view class="text">
								获取idAbout me
						</view>
					</view>
				</view>
			</view>
		</view>
		</view>
		
		
		
		<customtabbar ></customtabbar>
		
		
		
	</template>

	<script>
				
		import customtabbar from "@/components/customtabbar/customtabbar.vue";
		import {get_openid} from '@/utils/api/login.js'
		
		import { userStore } from '@/stores/modules/user.js';
		const user = userStore();
		
		export default {
			data() {
				return {
					title: 'Hello'
				}
			},
			onLoad() {
			        
			    },
			methods: {
				run(){
					uni.navigateTo({
					  url: '/pages/testpage/testpage' // 目标页面路径
					});
					// console.log("执行跳转！")
				},
				run2(){
					uni.navigateTo({
					  url: '/pages/welcome/welcome' // 目标页面路径
					});
					// console.log("执行跳转！")
				},
				diaoyong(){
						    get_openid()
							.then(res => {
								user.setUserInfo(res);
								
								uni.showToast({ icon:'success', title:'登录成功'});
								setTimeout(() => {
								      uni.switchTab({ url:'/pages/index/index'});
								    }, 500);
								  })
								  
						    .catch(error => {
						            console.error("发生错误:", error); // 捕获并打印任何发生的错误
						        });
				},

			}
		}
	</script>

	<style>	
		.bg {
		    width: 100%;
		    height: 100vh;
		    background-image: 
		       radial-gradient(closest-side, rgba(0, 153, 255, 0.5), rgba(255, 255, 255, 0)),
		       radial-gradient(closest-side, rgba(102, 0, 204, 0.5), rgba(255, 102, 255, 0)),
		       radial-gradient(closest-side, rgba(0, 255, 255, 0.5), rgba(153, 255, 255, 0)),  
		       radial-gradient(closest-side, rgba(34, 139, 34, 0.5), rgba(124, 252, 0, 0)),  
		       radial-gradient(closest-side, rgba(255, 0, 153, 0.5), rgba(255, 153, 255, 0));
		    background-size: 
		        130vmax 130vmax, 
		        80vmax 80vmax, 
		        90vmax 90vmax, 
		        110vmax 110vmax, 
		        90vmax 90vmax;
		    background-position:
		        -80vmax -80vmax, 
		        60vmax -30vmax, 
		        10vmax 10vmax,
		        -30vmax -10vmax,
		        50vmax 50vmax;
		    background-repeat: no-repeat;
		    animation: 3s movement linear infinite;
		    position: absolute;
		    top: 0;
		    left: 0;
		    z-index: 0;
		}
		
		@keyframes movement {
		    0%,
		    100% {
		        background-size: 
		            130vmax 130vmax, 
		            80vmax 80vmax, 
		            90vmax 90vmax, 
		            110vmax 110vmax, 
		            90vmax 90vmax;
		        background-position:
		            -80vmax -80vmax, 
		            60vmax -30vmax, 
		            10vmax 10vmax,
		            -30vmax -10vmax, 
		            50vmax 50vmax;
		    }
		    25% {
		        background-size: 
		            100vmax 100vmax, 
		            90vmax 90vmax, 
		            100vmax 100vmax, 
		            90vmax 90vmax, 
		            60vmax 60vmax;
		        background-position:
		            -60vmax -90vmax, 
		            50vmax -40vmax,
		            0vmax -20vmax,
		            -40vmax -20vmax,
		            40vmax 60vmax;
		    }
		    50% {
		        background-size:
		            80vmax 80vmax, 
		            110vmax 110vmax, 
		            80vmax 80vmax, 
		            60vmax 60vmax, 
		            80vmax 80vmax;
		        background-position:
		            -50vmax -70vmax, 
		            40vmax -30vmax, 
		            10vmax 0vmax, 
		            20vmax 10vmax, 
		            30vmax 70vmax;
		    }
		    75% {
		        background-size: 
		            90vmax 90vmax, 
		            90vmax 90vmax, 
		            100vmax 100vmax, 
		            90vmax 90vmax, 
		            70vmax 70vmax;
		        background-position:
		            -50vmax -40vmax, 
		            50vmax -30vmax, 
		            20vmax 0vmax,
		            -10vmax 10vmax, 
		            40vmax 60vmax;
		    }
		}
		.bg::after {
		    width: 100%;
		    height: 100%;
		    content: '';
		    position: fixed;
		    top: 0;
		    left: 0;
		    z-index: -2;
		}
		/* 外部包围|顶层样式设置 */
		.wrap{
			width: 100%;
			min-height: 80vh;
			/* background-color: black; */
			z-index: 1; 
		}
		
		.container{
			width: 90%;
			min-height: 80vh;
			margin: auto;
			/* background-color: yellowgreen; */
		}	
		/* 头部样式设置 */
		.header{
			/* background-color: grey; */
			width: 100%;
			height: 100rpx;
			margin-top: 40rpx;	
			display: flex;
			align-items: center;
			justify-content: space-between	
		}
		.logo{
			width: 270rpx;
			height: 100rpx;
		}
		.logo image{
			width: 100%;
			height: 100%;
			/* 平铺 */
		}
		.role{
			 width: 100rpx;
			 height: 100rpx;
		}
		.role image{
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		/* 身体样式设置——选项卡*/
		.info{
			width: 100%;
			height: 100%;
			border-radius: 60rpx;/* 圆角 */
			/* background-color:black; */
			/* 透明 */
			/* background-color: rgba(255, 255, 255, 0.2); */
			/* margin-top: 40rpx; */
			display: flex;
			/* 设置主轴方向 */
			flex-direction: row;
			/* 在主轴方向的对齐方式 */
			justify-content: space-around;
			flex-wrap: wrap;
			margin-top: 40rpx;	
		}
		/* 选项栏容器 */
		.info_item{
			/* background-color: aquamarine; */
			width: 30%;
			height: 40%;
			/* margin: auto; */
			/* background-color: rgba(255, 255, 255, 0.5); */
			display: flex;		
			flex-direction: column;
			align-items: center;
			/* align-content: center; */
			justify-content: space-around;
			padding: 15rpx;
			/* 圆角 */
			border-radius: 80rpx;
			transition: all 0.3s ease;
		}
		/* 悬停特效 */
		  .info_item:hover {
		        transform: scale(1.1);
		        opacity: 0.8;
		    }
		/* 放icon的容器 */
		.icon{
			width: 200rpx;
			height: 200rpx;	
		
		}
		/* icon图片本身 */
		.icon image{
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		@font-face {
		    font-family: 'fontali'; /* 定义字体名称，可自定义 */
			src:url('/static/font/DingTalk-JinBuTi.woff') format('woff'); /* 字体文件路径和格式 */
			src:url('/static/font/DingTalk-JinBuTi.woff2') format('woff2'); /* 字体文件路径和格式 */
		    src:url('/static/font/DingTalk-JinBuTi.ttf') format('ttf'); /* 字体文件路径和格式 */
		}
		.text{
			/* flex的项目属性,1代表一个参数属性flex是简写:按剩余空间弹性扩展 */
			flex:1;
			color: cadetblue;
			padding-left: 20rpx;
			font-family: 'fontali';  
		}
		/* 脚部样式设置 */
		.foot{
			width: 100%;
			height: 80rpx;
			position: absolute;
			bottom: 70rpx; 
		}
		.footer {
		  text-align: center;
		  padding: 20rpx 0;
		}
		.footer-divider {
		  width: 45%;
		  height: 1rpx;
		  background-color: #ccc;
		  margin: 10rpx auto;
		}		
		.footer-icons {
		  display: flex;
		  justify-content: center;
		  margin-bottom: 1rpx;
		}		
		.footer-icon {
		  width: 40rpx;
		  height: 40rpx;
		  margin: 0 10rpx;
		}		
		.footer-copyright {
		  font-family: 'Roboto', sans-serif; /* 使用Roboto字体，你可以替换为其他你喜欢的字体 */
		    font-size: 12px;
		    letter-spacing: 1.7px; /* 增加字母间距 */
		    line-height: 1.8; /* 增加行高，实现上下间距更大 */
		  color: #cfcfcf;         
		}
	</style>
